<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Title</title>
        <link rel="stylesheet" href="css/xiaomi.css">
    </head>
    <body>
        <!--头部-->
        <!--顶部导航栏-->
        <div id="first">
            <div class="first-1">
                <a href="#" class="first-1-1"></a>
            </div>
            <div class="first-2">
                <div class="first-2-1 w">
                    <ul>
                        <li><a href="#">小米商城</a></li>
                        <li><a href="#">MIUI</a></li>
                        <li><a href="#">IoT</a></li>
                        <li><a href="#">云服务</a></li>
                        <li><a href="#">金融</a></li>
                        <li><a href="#">有品</a></li>
                        <li><a href="#">小爱开放平台</a></li>
                        <li><a href="#">企业团购</a></li>
                        <li><a href="#">资质证照</a></li>
                        <li><a href="#">协议规则</a></li>
                        <li><a href="#">下载app</a></li>
                        <li><a href="#">智能生活</a></li>
                        <li><a href="#"> Select Location</a></li>
                    </ul>
                    <div class="first-2-1-s">
                        <a href="#">登录</a>
                        <a href="#">注册</a>
                        <a href="#">消息通知</a>
                        <span>购物车(0)</span>
                    </div>
                </div>
            </div>
        </div>
        <div id="head">
            <div class="head-1 w">
                <div class="head-logo">
                    <a href="https://www.mi.com/index.html" target="_blank">
                        <img src="img/img-xiaomi/mi-logo.png" alt="" class="img1">
                        <img src="img/img-xiaomi/mi-home.png" alt="" class="img2">
                    </a>
                </div>
                <ul>
                    <li><a href="#">小米手机</a></li>
                    <li><a href="#">Redmi 红米</a></li>
                    <li><a href="#">电视</a></li>
                    <li><a href="#">笔记本</a></li>
                    <li><a href="#">家电</a></li>
                    <li><a href="#">路由器</a></li>
                    <li><a href="#">智能硬件</a></li>
                    <li><a href="#">服务</a></li>
                    <li><a href="#">社区</a></li>
                </ul>
                <div class="head-form">
                    <from>
                        <input type="text" placeholder="小米10"><input type="button">
                    </from>
                </div>
            </div>
            <div class="head-2 w">
                <ul>
                    <li><a href="#">手机&nbsp;电话卡</a></li>
                    <li><a href="#">电视&nbsp;盒子</a></li>
                    <li><a href="#">笔记本&nbsp;显示器</a></li>
                    <li><a href="#">家电&nbsp;插线板</a></li>
                    <li><a href="#">出行&nbsp;穿戴</a></li>
                    <li><a href="#">智能&nbsp;路由器</a></li>
                    <li><a href="#">电源&nbsp;配件</a></li>
                    <li><a href="#">健康&nbsp;儿童</a></li>
                    <li><a href="#">耳机&nbsp;音响</a></li>
                    <li><a href="#">生活&nbsp;箱包</a></li>
                </ul>
                <ul id="lunbo">
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
            <div class="head-3 w">
                <ul>
                    <li><a href="#"><img src="img/img-xiaomi/head-time.png">小米秒杀</a></li>
                    <li><a href="#"><img src="img/img-xiaomi/head-c.png">企业团购</a></li>
                    <li><a href="#"><img src="img/img-xiaomi/head-f.png">F码通道</a></li>
                    <li><a href="#"><img src="img/img-xiaomi/head-mi.png">米粉卡</a></li>
                    <li><a href="#"><img src="img/img-xiaomi/head-old.png">以旧换新</a></li>
                    <li><a href="#"><img src="img/img-xiaomi/head-s.png">话费充值</a></li>
                </ul>
                <img src="img/img-xiaomi/head-1.jpg" alt=""><img src="img/img-xiaomi/head-2.jpg" alt=""><img
                    src="img/img-xiaomi/head-3.jpg">
            </div>
        </div>
        <!--主体-->
        <!--主题部分，标题、列表效果相同-->
        <!--智能/搭配/配件/周边/视频/底部的小字都不需要做-->
        <div id="body">
            <!--小米闪购-->
            <div class="body-1 w">
                <div class="body-1-2 w">
                    <h2 class="title">小米闪购</h2>
                    <span>&lt;</span><span>&gt;</span>
                </div>
                <div class="body-1-1">
                    <dl>
                        <span style="height:29px;font-size: 19px;color: #ef3a3b;display: block;line-height: 29px;">22:00&nbsp;场</span>
                        <dt><img src="img/img-xiaomi/xm_12.png" alt=""></dt>
                        <dd style="font-size: 15px;color: #706f6f;height: 29px;line-height: 29px">距离结束还有</dd>
                        <dd style="margin-top: 25px"><span>00</span>:<span>52</span>:<span>38</span></dd>
                    </dl>
                    <dl>
                        <dt><img src="img/img-xiaomi/xm_03.png" alt=""></dt>
                        <dd style="margin-top: 42px">贝医生儿童声波电动牙刷(...</dd>
                        <dd style="color: #adadad">会讲故事的电动牙刷</dd>
                        <dd><span style="color: #fa6509">249元</span>&nbsp;<span
                                style="text-decoration: line-through;color:#adadad">299元color:#adadad</span></dd>
                    </dl>
                    <dl>
                        <dt><img src="img/img-xiaomi/xm_05.png" alt=""></dt>
                        <dd style="margin-top: 42px">小米户外蓝牙音箱&nbsp;黑色</dd>
                        <dd style="color: #adadad">无限随行，生生动听</dd>
                        <dd><span style="color: #fa6509">169元</span>&nbsp;<span
                                style="text-decoration: line-through;color:#adadad">199元</span></dd>
                    </dl>
                    <dl>
                        <dt><img src="img/img-xiaomi/xm_07.png" alt=""></dt>
                        <dd style="margin-top: 42px">Redmi全自动波轮洗衣机1A...</dd>
                        <dd style="color: #adadad">一键操作，父母都爱用</dd>
                        <dd><span style="color: #fa6509">799元</span>&nbsp;<span
                                style="text-decoration: line-through;color:#adadad">899元</span></dd>
                    </dl>
                    <dl>
                        <dt><img src="img/img-xiaomi/xm_09.png" alt=""></dt>
                        <dd style="margin-top: 42px">小米净水器C1(三出水)&nbsp;白色</dd>
                        <dd style="color: #adadad">直饮水，生活水随心使用</dd>
                        <dd><span style="color: #fa6509">699元</span>&nbsp;<span
                                style="text-decoration: line-through;color:#adadad">1299元</span></dd>
                    </dl>
                </div>
                <img src="img/img-xiaomi/body-bg-.png" alt="">
            </div>
            <!--手机-->
            <div class="body-2 w">
                <div class="body-2-2 w">
                    <h2 class="title">手机</h2>
                    <a><span>查看全部</span><span>&gt;</span></a>
                </div>
                <div class="body-2-1 w">
                    <ul class="des">
                        <li>
                            <img src="img/img-xiaomi/body-2-1.png" alt="">
                        </li>
                        <li>
                            <img src="img/img-xiaomi/body-2-1.webp" alt="">
                            <h3 class="titles">小米10&nbsp;至尊版</h3>
                            <p class="desc">120X 变焦/120W秒充/120Hz屏幕</p>
                            <p class="price">5299元起</p>
                        </li>
                        <li>
                            <img src="img/img-xiaomi/body-2-2.webp" alt="">
                            <h3 class="titles">Redmi K30 至尊版</h3>
                            <p class="desc">120Hz弹出全面屏，天玑1000+旗舰处理器</p>
                            <p class="price">1999元起</p>
                        </li>
                        <li>
                            <img src="img/img-xiaomi/body-2-3.webp" alt="">
                            <h3 class="titles">腾讯黑鲨3S</h3>
                            <p class="desc">骁龙865处理器，120Hz刷新率</p>
                            <p class="price">3999元起</p>
                        </li>
                        <li>
                            <img src="img/img-xiaomi/body-2-4.webp" alt="">
                            <h3 class="titles">Redmi 9A</h3>
                            <p class="desc">5000mAh长循环大电量，6.53"超大护眼屏幕</p>
                            <p class="price">599元起</p>
                        </li>
                        <li>
                            <img src="img/img-xiaomi/body-2-5.webp" alt="">
                            <h3 class="titles">小米10 青春版 5G</h3>
                            <p class="desc">50倍潜望式变焦 / 轻薄5G手机</p>
                            <p class="price">1899元起 <span class="spans">2099元</span></p>
                        </li>
                        <li>
                            <img src="img/img-xiaomi/body-2-6.webp" alt="">
                            <h3 class="titles">小米10</h3>
                            <p class="desc">骁龙865/1亿像素相机</p>
                            <p class="price">3799元 <span class="spans">3999元</span></p>
                        </li>
                        <li>
                            <img src="img/img-xiaomi/body-2-7.webp" alt="">
                            <h3 class="titles">Redmi K30 Pro</h3>
                            <p class="desc">双模5G，骁龙865，弹出全面屏</p>
                            <p class="price">2999元起</p>
                        </li>
                        <li>
                            <img src="img/img-xiaomi/body-2-8.webp" alt="">
                            <h3 class="titles">Redmi K30 Pro 变焦版</h3>
                            <p class="desc">双模5G，骁龙865，弹出全面屏</p>
                            <p class="price">3299元 <span class="spans">3999元</span></p>
                        </li>
                    </ul>
                </div>
                <img src="img/img-xiaomi/bpdy-2-2.png" alt="">
            </div>
            <!--家电-->
            <div class="body-3 w">
                <div class="body-2-2 w">
                    <h2 class="title">家电</h2>
                    <span style="margin-left: 30px;right: -83.5%" id="ff">热门</span><span id="dd">电视影音</span>
                </div>
                <div class="body-2-1 w">
                    <div class="body-2-1-1" style="background: none">
                        <img src="img/img-xiaomi/body-3.1.webp" alt=""><img src="img/img-xiaomi/body-3.2.webp" alt="">
                    </div>
                    <div class="body-2-1-2">
                        <ul>
                            <li>
                                <img src="img/img-xiaomi/body-3-1.webp" alt="">
                                <h3 class="titles">Redmi 红米电视 70英寸</h3>
                                <p class="desc">70英寸震撼巨屏，4K画质，细腻如真</p>
                                <p class="price">3199元 <span class="spans">3799元</span></p>
                            </li>
                            <li>
                                <img src="img/img-xiaomi/body-3-2.webp" alt="">
                                <h3 class="titles">小米全面屏电视E32C</h3>
                                <p class="desc">全面屏设计，人工智能系统</p>
                                <p class="price">888元 <span class="spans">899元</span></p>
                            </li>
                            <li>
                                <img src="img/img-xiaomi/body-3-3.webp" alt="">
                                <h3 class="titles">小米全面屏电视E55A</h3>
                                <p class="desc">全面屏设计，人工智能语音</p>
                                <p class="price">2088元 <span class="spans">2099元</span></p>
                            </li>
                            <li>
                                <img src="img/img-xiaomi/body-3-4.jpg" alt="">
                                <h3 class="titles">米家空调</h3>
                                <p class="desc">出众静音，快速制冷热</p>
                                <p class="price">1499元 <span class="spans">1799元</span></p>
                            </li>
                            <li>
                                <img src="img/img-xiaomi/body-3-5.webp" alt="">
                                <h3 class="titles">米家互联网洗烘一体机 Pro 10kg</h3>
                                <p class="desc">智能洗烘，省心省力</p>
                                <p class="price">2999元起 <span class="spans">3299元</span></p>
                            </li>
                            <li>
                                <img src="img/img-xiaomi/body-3-6.webp" alt="">
                                <h3 class="titles">Redmi全自动波轮洗衣机1A 8kg</h3>
                                <p class="desc">一键操作，父母都爱用</p>
                                <p class="price">849元 <span class="spans">899元</span></p>
                            </li>
                            <li>
                                <img src="img/img-xiaomi/body-3-7.webp" alt="">
                                <h3 class="titles">15.6" 四核i7 16G 独显 512G</h3>
                                <p class="desc">全面均衡的国民轻薄本</p>
                                <p class="price">4699元起 <span class="spans">4899元</span></p>
                            </li>
                            <li id="lis">
                                <img style="width: 80px;height: 80px;float: right;" src="img/img-xiaomi/body-3-8.png"
                                     alt="">
                                <h3 style="text-align: left">Air 13.3"2019 款</h3>
                                <p class="price" style="text-align: left;padding-left: 30px">5499元起</p>
                            </li>
                            <li id="li">
                                <img src="img/img-xiaomi/cc.png" alt="">
                                <p>浏览更多<br><span>热门</span></p>
                            </li>
                        </ul>
                    </div>
                </div>
                <img src="img/img-xiaomi/body-3.webp" alt="">
            </div>
            <!--智能-->
            <!--搭配-->
            <!--配件-->
            <!--周边-->
            <!--视频-->
        </div>
        <!--底部-->
        <div id="foot">
            <div class="foot-1 w">
                <ul>
                    <li>
                        <img src="img/img-xiaomi/weixiu.png" alt="">
                        <a href="#">
                            预约维修服务
                        </a>
                    </li>
                    <li>
                        <img src="img/img-xiaomi/7%20(1).png" alt="">
                        <a href="#">
                            7天无理由退货
                        </a>
                    </li>
                    <li>
                        <img src="img/img-xiaomi/15.png" alt="">
                        <a href="#">
                            15天免费换货
                        </a>
                    </li>
                    <li>
                        <img src="img/img-xiaomi/7%20(2).png" alt="">
                        <a href="#">
                            满99元包邮
                        </a>
                    </li>
                    <li>
                        <img src="img/img-xiaomi/dingwei.png" alt="">
                        <a href="#">
                            520余家售后网点
                        </a>
                    </li>
                </ul>
            </div>
            <div class="foot-2 w">
                <dl>
                    <dt>帮助中心</dt>
                    <dd><a>账户管理</a></dd>
                    <dd><a>购物指南</a></dd>
                    <dd><a>订单操作</a></dd>
                </dl>
                <dl>
                    <dt>服务支持</dt>
                    <dd><a>售后政策</a></dd>
                    <dd><a>自助服务</a></dd>
                    <dd><a>相关下载</a></dd>
                </dl>
                <dl>
                    <dt>线下门店</dt>
                    <dd><a>小米之家</a></dd>
                    <dd><a>服务网点</a></dd>
                    <dd><a>授权体验店</a></dd>
                </dl>
                <dl>
                    <dt>关于小米</dt>
                    <dd><a>了解小米</a></dd>
                    <dd><a>加入小米</a></dd>
                    <dd><a>投资者关系</a></dd>
                    <dd><a>企业社会责任</a></dd>
                    <dd><a>廉洁举报</a></dd>
                </dl>
                <dl>
                    <dt>关注我们</dt>
                    <dd><a>新浪微博</a></dd>
                    <dd><a>官方微信</a></dd>
                    <dd><a>联系我们</a></dd>
                    <dd><a>公益基金会</a></dd>
                </dl>
                <dl>
                    <dt>特色服务</dt>
                    <dd><a>F 码通道</a><d>
                    <dd><a>礼物码<</a></dd>
                    <dd><a>防伪查询</a></dd>
                </dl>
                <div class="foot-2-1">
                    <p>400-100-5678</p>
                    <p>8:00-18:00（仅收市话费）</p>
                    <a href="#"><img src="img/img-xiaomi/xinxi.png" alt="">人工客服</a>
                    <p>关注小米:<a href="#"></a><a href="#"></a></p>
                </div>
            </div>
        </div>
    </body>
</html>